<template>
  <div class="find">
    <div class="top1">
      <navBar title="发现" :showInfo="false"></navBar>
      <van-pull-refresh v-model="loading" @refresh="refresh">
        <div class="find-content">
          <findCell title="面试技巧"></findCell>
          <technicItem
            v-for="(item, index) in technicList"
            :key="index"
            :info="item"
          ></technicItem>
        </div>
        <div class="top2" style="margin-top: 10px">
          <findCell title="市场数据"></findCell>
          <div class="find-content">
            <van-tag class="tag" color="#eceaea" text-color="#8e8e9f">{{
              chartList.city
            }}</van-tag>
            <van-tag class="tag" color="#eceaea" text-color="#8e8e9f">{{
              chartList.position
            }}</van-tag>
            <ul class="chart" ref="chart">
              <li
                class="chart-item"
                v-for="(item, index) in chartList.yearSalary"
                :key="index"
              >
                <!-- v-show="index < 3 || showAll" -->
                <div class="year">{{ item.year.substr(0, 5) }}</div>
                <div class="chart-line">
                  <div
                    class="line"
                    :style="{
                      width: (item.salary / +chartList.topSalary) * 100 + '%',
                    }"
                  >
                    ￥{{ item.salary }}
                  </div>
                </div>
                <div class="icon" v-if="item.percent != undefined">
                  <i class="iconfont color1" v-if="item.percent < 0"
                    >&#xe64e;</i
                  >
                  <i class="iconfont color2" v-else>&#xe651;</i>
                </div>
                <div class="per" v-if="item.percent != undefined">
                  {{ item.percent }}%
                </div>
              </li>
            </ul>
            <div class="look-more" @click="move">
              <div class="div" v-if="!showAll">
                <span>展开更多 <i class="iconfont icon1">&#xe652;</i> </span>
              </div>
              <div v-else>
                <span>收起 <i class="iconfont icon1 r180">&#xe652;</i> </span>
              </div>
            </div>
          </div>
        </div>
        <div class="top3">
          <findCell title="面经分享" @click.native="$router.push('/home/shareList')"></findCell>
          <articles
            class="articles"
            v-for="(item, index) in shareList"
            :key="index"
            :info="item"
          ></articles>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import findCell from "./findCell";
import technicItem from "./technicItem";
import { articlesTechnic, chartDataHot, articlesShare } from "@/api/find.js";
import articles from "./articles";
export default {
  name: "find",
  components: {
    findCell,
    technicItem,
    articles,
  },
  data() {
    return {
      technicList: [],
      chartList: [],
      showAll: false,
      shareList: [],
      loading: false,
    };
  },
  created() {
    this.refresh()
  },
  methods: {
    move() {
      this.showAll = !this.showAll;
      if (this.showAll) {
        this.$refs.chart.style.height = this.$refs.chart.scrollHeight + "px";
      } else {
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          "px";
      }
    },
    refresh() {
      // 面试技巧
      articlesTechnic().then((res) => {
        // window.console.log("面试技巧", res);
        this.technicList = res.data.data.list;
      });
      // 市场数据
      chartDataHot().then((res2) => {
        // window.console.log("市场数据", res2);
        this.chartList = res2.data.data;
        this.$nextTick(() => {
          this.$refs.chart.style.height =
            (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
              3 +
            "px";
        });
      });
      // 面经分享
      articlesShare().then((res3) => {
        // window.console.log("面经分享", res3);
        this.shareList = res3.data.data.list;
      });
      this.loading = false
    },
  },
};
</script>

<style lang="less" scoped>
.find {
  background-color: #f7f4f5;
  .top1 {
    padding-bottom: 10px;
    .top3{
      margin-top: 10px;
    }
    .find-content {
      background-color: #fff;
      padding: 0 15px;
      .tag {
        margin-top: 30px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #545671;
        line-height: 20px;
        letter-spacing: 0px;
        border-radius: 5px;
        margin-right: 10px;
      }
      .chart {
        margin-top: 25px;
        transition: height 1s;
        overflow: hidden;
        .chart-item {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #545671;
          line-height: 20px;
          letter-spacing: 0px;
          .year {
            text-align: center;
            width: 50px;
            margin-right: 11px;
          }
          .chart-line {
            // flex: 1;
            width: 225px;
            height: 12px;
            background: #ebdfdf;
            border-radius: 8px;
            margin-right: 7px;
            .line {
              background-color: #fe6d67;
              border-radius: 8px;
              font-size: 11px;
              text-align: center;
              color: #ffffff;
              line-height: 15px;
            }
          }
          .icon {
            margin-right: 8px;
            width: 16px;
            .color1 {
              color: #fe6d67;
            }
            .color2 {
              color: #00d47a;
            }
          }
          .per {
            width: 30px;
            text-align: right;
          }
        }
      }
      .look-more {
        margin-top: 23px;
        padding-bottom: 19px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #545671;
        line-height: 20px;
        letter-spacing: 0px;
        .icon1 {
          font-size: 12px;
        }
        .r180 {
          display: inline-block;
          transform: rotate(180deg);
        }
      }
    }
  }
  .articles {
    background-color: #fff;
  }
}
</style>